<!DOCTYPE html>
<html>
<head>
<title>Particle Interaction Diagram</title>
</head>
<body>
<canvas id="physicsDiagram" width="550" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsDiagram');
    const ctx = canvas.getContext('2d');

    // Set a white background for the canvas
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // General style settings for the drawing
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 3;
    const baseFontSize = 26;
    ctx.font = `${baseFontSize}px serif`;

    // Helper function to draw a line with an arrowhead
    function drawArrow(fromX, fromY, toX, toY, headLength = 15) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);

        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        
        // Draw the arrowhead
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        
        ctx.stroke();
    }

    // --- Draw Diagram Components ---

    // 1. Incoming Pion Beam (π Beam)
    ctx.textAlign = 'left';
    ctx.fillText('π Beam', 50, 200);
    drawArrow(140, 195, 220, 195);

    // 2. Target block
    const targetX = 220;
    const targetY = 150;
    const targetSize = 90;
    
    ctx.textAlign = 'center';
    ctx.fillText('target', targetX + targetSize / 2, 135);
    
    // Draw the target box outline and then fill it with hatching lines
    ctx.save();
    ctx.beginPath();
    ctx.rect(targetX, targetY, targetSize, targetSize);
    ctx.stroke();
    ctx.clip(); // Use clipping to contain the hatching lines within the box
    
    ctx.beginPath();
    const hatchSpacing = 15;
    // Draw long diagonal lines with a slope of -1 that are clipped by the rectangle
    for (let c = targetX + targetY; c <= targetX + targetY + 2 * targetSize; c += hatchSpacing) {
        ctx.moveTo(c - (targetY + targetSize), targetY + targetSize);
        ctx.lineTo(c - targetY, targetY);
    }
    ctx.stroke();
    ctx.restore();

    // 3. Outgoing Particles
    const exitX = targetX + targetSize; // x-coordinate where particles emerge

    // Lambda (Λ) particle
    const lambdaStartX = exitX;
    const lambdaStartY = 175;
    const lambdaEndX = 420;
    const lambdaEndY = 85;
    drawArrow(lambdaStartX, lambdaStartY, lambdaEndX, lambdaEndY);
    ctx.font = `bold ${baseFontSize + 4}px serif`; // Make Lambda symbol slightly larger and bold
    ctx.fillText('Λ', lambdaEndX + 25, lambdaEndY + 10);
    ctx.font = `${baseFontSize}px serif`; // Reset font to default

    // "Other particles"
    const otherStartX = exitX;
    const otherStartY1 = 215;
    const otherStartY2 = 228;
    const vecX = 90;
    const vecY = 60;
    const otherEndX1 = otherStartX + vecX;
    const otherEndY1 = otherStartY1 + vecY;
    const otherEndX2 = otherStartX + vecX;
    const otherEndY2 = otherStartY2 + vecY;

    // Draw two parallel arrows
    drawArrow(otherStartX, otherStartY1, otherEndX1, otherEndY1);
    drawArrow(otherStartX, otherStartY2, otherEndX2, otherEndY2);
    
    ctx.textAlign = 'left';
    ctx.fillText('other particles', 350, 315);

    // 4. Figure Caption
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 3.3', canvas.width / 2, 400);

</script>
</body>
</html>